<template>
  <div class="vehicle">

    <div class="vehicle_shell" v-if="list0.length>0">
      <div class="vehicle_subtit">轿车</div>
      <ul>
        <li class="flex vehicle_li" v-for="item in list0">
          <p @click="toModify(item.id,item.car_type,item.car_name,item.car_models,item.car_num)">{{item.car_name}} {{item.car_models}} {{item.type_name}} {{item.car_num}}</p>
          <div class="vehicle_choose" v-if="item.is_default == 1">默认</div>
          <div class="vehicle_detele" @click="toDelete(item.id)">删除</div>
        </li>
      </ul>
    </div>

    <div class="vehicle_shell" v-if="list2.length>0">
      <div class="vehicle_subtit">SUV</div>
      <ul>
        <li class="flex vehicle_li" v-for="item in list2">
          <p @click="toModify(item.id,item.car_type,item.car_name,item.car_models,item.car_num)">{{item.car_name}} {{item.car_models}} {{item.type_name}} {{item.car_num}}</p>
          <div class="vehicle_choose" v-if="item.is_default == 1">默认</div>
          <div class="vehicle_detele" @click="toDelete(item.id)">删除</div>
        </li>
      </ul>
    </div>
    
    <div class="vehicle_shell" v-if="list1.length>0">
      <div class="vehicle_subtit">MPV</div>
      <ul>
        <li class="flex vehicle_li" v-for="item in list1">
          <p @click="toModify(item.id,item.car_type,item.car_name,item.car_models,item.car_num)">{{item.car_name}} {{item.car_models}} {{item.type_name}} {{item.car_num}}</p>
          <div class="vehicle_choose" v-if="item.is_default == 1">默认</div>
          <div class="vehicle_detele" @click.stop="toDelete(item.id)">删除</div>
        </li>
      </ul>
    </div>

    <div class="vehicle_add" @click="toVehicleAdd">新增车辆</div>

  </div>
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: "vehicle",
  data () {
    return {
      pick: '',
      list: [],
      list0: [],
      list1: [],
      list2: [],
    }
  },
  mounted() {
    this.getInfo();
    this.$root.share();
  },
  methods: {
    toVehicleAdd(){
      this.$router.push({
        name: 'VehicleAdd',
        params: {
          id: 0
        }
      })
    },
    toModify(id,type,brand,model,plate){
      this.$router.push({
        name: 'VehicleAdd',
        params: {
          id: id,
          type: type,
          brand: brand,
          model: model,
          plate: plate,
        }
      })
    },
    getInfo(){
      var that = this;
      axios.get(global.api.carMine.car,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("then");
        console.log(res);
        // that.list = res.data.data;
        for (var i=0;i<res.data.data.length;i++) {
          if (res.data.data[i].car_type == 3) {
            that.list0 = that.list0.concat(res.data.data[i]);
          } else if (res.data.data[i].car_type == 4) {
            that.list1 = that.list1.concat(res.data.data[i]);
          } else if (res.data.data[i].car_type == 5 || res.data.data[i].car_type == 6) {
            that.list2 = that.list2.concat(res.data.data[i]);
          } 
        } 
      })
      .catch(function(res){
        console.log("catch");
        console.log(res);
      })
    },
    // 删除
    toDelete(index){
      var that = this;
      axios.get(global.api.carMine.del,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          id: index
        }
      })
      .then(function(res){
        console.log("then");
        console.log(res);
        if (res.data.code == 0) {
          location.reload()
        }
      })
      .catch(function(res){
        console.log("catch");
        console.log(res);
      })
    },
  },
}
</script>
  
<style scoped>
  .vehicle_add{
    margin: 3rem auto;
    line-height: 2.3rem;
    text-align: right;
    background-color: #2ecc80;
    width: 60%;
    text-align: center;
    border-radius: 5rem;
  }
  .vehicle_shell {
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .vehicle_subtit {
    text-align: left;
    padding-left: 6%;
    padding-top: 1rem;
    font-size: 1.1rem;
  }
  .vehicle_shell ul {}
  .vehicle_shell li {
    width: 90%;
    margin: 0 auto;
    /*padding-left: 1rem;*/
    border-bottom: 1px solid #B3B3B4;
    line-height: 3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: #595757;
  }
  .vehicle_shell li:last-child {
    border-bottom: none;
  }
  .vehicle_shell label {}
  .vehicle_shell input {}
  .vehicle_li{
    justify-content: space-between;
    align-items: center;
  }
  .vehicle_choose{
    width: 2.4rem;
    height: 1.4rem;
    line-height: 1.4rem;
    background-color: #2ecc80;
    color: #fff;
    font-size: 0.85rem;
    margin-right: 1.1rem;
  }
  .vehicle_detele{
    width: 3rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.9rem;
    border-left: 1px solid #B3B3B4;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
</style>
